import React, { Dispatch, SetStateAction } from 'react';
import { openAni } from '../App/App';
import GameMain from './GameMain/GameMain';
import GameShow from "./GameShow/GameShow";
import {CSSTransition} from "react-transition-group";

interface GameProps {
    setOpenAni: Dispatch<SetStateAction<openAni>>
    openAni: openAni
}

interface GameState{
  showGame: boolean
}

export default class Game extends React.Component<GameProps, GameState> {

  constructor(props: GameProps) {
    super(props);
    this.state = {
      showGame: true
    };
  }

  componentDidMount() {
    this.props.openAni?.loadingOver
      ? this.props.setOpenAni({ gameShow: true })
      : this.props.openAni.gameOver = true;

    this.initEventListen()
  }

  initEventListen() {
    document.addEventListener('keyup', (event) => {
      const needChangeCode = [27, 32, 13]
      if (needChangeCode.includes(event.keyCode)) {
        this.setState({
          showGame: false
        })
      }
    })
  }

  render() {
    console.log(3333333);
    return <div>
      <CSSTransition in={this.state.showGame} unmountOnExit timeout={1000} classNames='my-node'>
        <GameMain openAni={this.props.openAni}/>
      </CSSTransition>
      <CSSTransition in={!this.state.showGame} unmountOnExit timeout={1000} classNames='my-node'>
        <GameShow/>
      </CSSTransition>
    </div>;
  }
}
